<template>
  <div class="btns" >
    <slot  name="left"></slot>
    <el-button  v-permission="permission.edit" :loading="editLoading" :disabled="disabledEdit"  type="primary" @click="toEdit" v-if="showDel" link>编辑</el-button>
       <div v-permission="permission.del">
         <el-popover :visible="pop" placement="top" width="180" trigger="manual"  v-if="showDel">
           <p>{{msg}}</p>
           <div style="text-align: right; margin: 0">
             <el-button  type="primary" @click="doCancel" link>取消</el-button>
             <el-button :loading="delLoading" type="primary"  @click="doDel">确定</el-button>
           </div>
           <template #reference>
             <el-button :disabled="disabledDel" type="primary"  @click="toDelete" style="color: red" link>删除</el-button>
           </template>
         </el-popover>
       </div>

    <slot  name="right"></slot>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import {deleteMethod} from "@/utils/request";
const  editLoading=ref(false)
const  delLoading=ref(false)

const props=defineProps({
  data: {
    type: Object,
    required: true
  },
  disabledEdit: {
    type: Boolean,
    default: false
  },
  disabledDel: {
    type: Boolean,
    default: false
  },
  msg: {
    type: String,
    default: '确定删除本条数据吗？'
  },
  showDel:{
    type : Boolean,
    default: true
  },
  showEdit:{
    type : Boolean,
    default: true
  },
  url:{},
  permission:{
    type: Object,
    default: {}
  }
})

const emit = defineEmits();
function  doDel(){
  deleteMethod(props.url,[props.data.id]).then(res=>{
    pop.value=false
    setTimeout(function (){
      emit("refresh")
    },300)

  })
}

function  toEdit(){
  emit("edit")
}
const  pop=ref(false)
function  doCancel() {
  pop.value = false
  //this.crud.cancelDelete(this.data)
}
function  toDelete() {
  pop.value = true
}

function  handleDocumentClick(event) {
  pop.value = false
}
</script>

<style scoped>
  .btns {
    display: flex;
    justify-content: center;
  }
</style>

